import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter UI 组件集',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter UI 组件演示')),
        body: SingleChildScrollView(
          padding: EdgeInsets.all(16.0),
          child: ComponentsDemo(),
        ),
      ),
    );
  }
}

class ComponentsDemo extends StatefulWidget {
  @override
  _ComponentsDemoState createState() => _ComponentsDemoState();
}

class _ComponentsDemoState extends State<ComponentsDemo> {
  bool _switchValue = true;
  bool _checkboxValue = false;
  String? _radioValue = '选项1';
  String _textInput = '';
  final _formKey = GlobalKey<FormState>();
  double _progressValue = 0.5;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 3.1 文本及样式
        _buildSectionTitle('3.1 文本及样式'),
        _buildTextSection(),

        // 3.2 按钮
        _buildSectionTitle('3.2 按钮'),
        _buildButtonSection(),

        // 3.3 图片及ICON
        _buildSectionTitle('3.3 图片及ICON'),
        _buildImageSection(),

        // 3.4 单选开关和复选框
        _buildSectionTitle('3.4 单选开关和复选框'),
        _buildSelectionSection(),

        // 3.5 输入框及表单
        _buildSectionTitle('3.5 输入框及表单'),
        _buildFormSection(),

        // 3.6 进度指示器
        _buildSectionTitle('3.6 进度指示器'),
        _buildProgressSection(),
      ],
    );
  }

  Widget _buildSectionTitle(String title) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 12),
      child: Text(
        title,
        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.blue),
      ),
    );
  }

  // 3.1 文本及样式
  Widget _buildTextSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('普通文本', style: TextStyle(fontSize: 16)),
        Text('加粗文本', style: TextStyle(fontWeight: FontWeight.bold)),
        Text('红色文本', style: TextStyle(color: Colors.red)),
        Text('大号文本', style: TextStyle(fontSize: 24)),
        Text('带下划线文本', style: TextStyle(decoration: TextDecoration.underline)),
        Text(
          '自定义样式文本',
          style: TextStyle(
            fontSize: 20,
            color: Colors.purple,
            fontStyle: FontStyle.italic,
            letterSpacing: 1.5,
          ),
        ),
        Divider(),
      ],
    );
  }

  // 3.2 按钮
  Widget _buildButtonSection() {
    return Wrap(
      spacing: 10,
      runSpacing: 10,
      children: [
        ElevatedButton(
          onPressed: () => print('ElevatedButton 点击'),
          child: Text('普通按钮'),
        ),
        OutlinedButton(
          onPressed: () => print('OutlinedButton 点击'),
          child: Text('边框按钮'),
        ),
        TextButton(
          onPressed: () => print('TextButton 点击'),
          child: Text('文本按钮'),
        ),
        IconButton(
          icon: Icon(Icons.favorite),
          color: Colors.red,
          onPressed: () => print('IconButton 点击'),
        ),
        FloatingActionButton.small(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
      ],
    );
  }

  // 3.3 图片及ICON
  Widget _buildImageSection() {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Icon(Icons.star, color: Colors.amber, size: 40),
            Icon(Icons.favorite, color: Colors.red, size: 40),
            Icon(Icons.thumb_up, color: Colors.blue, size: 40),
          ],
        ),
        SizedBox(height: 10),
        // 网络图片
        Image.network(
          'https://picsum.photos/200/100',
          height: 100,
          width: double.infinity,
          fit: BoxFit.cover,
        ),
        SizedBox(height: 10),
      ],
    );
  }

  // 3.4 单选开关和复选框
  Widget _buildSelectionSection() {
    return Column(
      children: [
        SwitchListTile(
          title: Text('开关状态'),
          value: _switchValue,
          onChanged: (value) => setState(() => _switchValue = value),
        ),
        CheckboxListTile(
          title: Text('复选框'),
          value: _checkboxValue,
          onChanged: (value) => setState(() => _checkboxValue = value!),
        ),
        Row(
          children: [
            Text('单选选项:'),
            Radio<String>(
              value: '选项1',
              groupValue: _radioValue,
              onChanged: (value) => setState(() => _radioValue = value),
            ),
            Text('选项1'),
            Radio<String>(
              value: '选项2',
              groupValue: _radioValue,
              onChanged: (value) => setState(() => _radioValue = value),
            ),
            Text('选项2'),
          ],
        ),
      ],
    );
  }

  // 3.5 输入框及表单
  Widget _buildFormSection() {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(
              labelText: '文本输入框',
              border: OutlineInputBorder(),
              prefixIcon: Icon(Icons.text_fields),
            ),
            onChanged: (value) => _textInput = value,
          ),
          SizedBox(height: 10),
          TextFormField(
            obscureText: true,
            decoration: InputDecoration(
              labelText: '密码输入',
              border: OutlineInputBorder(),
              prefixIcon: Icon(Icons.lock),
            ),
          ),
          SizedBox(height: 10),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('表单提交: $_textInput')),
                );
              }
            },
            child: Text('提交表单'),
          ),
        ],
      ),
    );
  }

  // 3.6 进度指示器
  Widget _buildProgressSection() {
    return Column(
      children: [
        LinearProgressIndicator(value: _progressValue),
        SizedBox(height: 10),
        CircularProgressIndicator(value: _progressValue),
        SizedBox(height: 10),
        Text('进度值: ${(_progressValue * 100).toStringAsFixed(1)}%'),
        Slider(
          value: _progressValue,
          onChanged: (value) => setState(() => _progressValue = value),
        ),
        ElevatedButton(
          onPressed: () => setState(() => _progressValue = 0),
          child: Text('重置进度'),
        ),
      ],
    );
  }
}